﻿$(function () {
    var prefix = "/logistics";
    echarts_1();
    echarts_3();
    echarts_4();
    echarts_5();
    echarts_6();
    echarts_7();
    echarts_8();

    function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        $.get(prefix + '/goodsCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echart1'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data:['发货数量'],
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',

                    },
                },
                "grid": {
                    "top": "15%",
                    "right": "10%",
                    "bottom": "40",
                    "left": "30%",
                },
                // grid: {
                //     left: '3%',
                //     right: '4%',
                //     bottom: '3%',
                //     containLabel: true
                // },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitLine: {
                        show: false // 隐藏网格线
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },

                    },

                },
                yAxis: {
                    type: 'category',
                    data: result.xdata,
                    splitLine: {
                        show: false // 隐藏网格线
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize:'14',
                        }
                    },
                },

                series: [
                    {
                        name: '发货数量',
                        type: 'bar',
                        data: result.ydata,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#03c893'
                                },
                                    {
                                        offset: 1,
                                        color: '#0091ff'
                                    }
                                ]),
                                barBorderRadius: 15,
                            }
                        },
                    },
                ]
            };


            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });



    }


    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例

        $.get(prefix + "/goodsAmount", function (result) {
            var myChart = echarts.init(document.getElementById('echart3'));
            data = result
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['销售金额'],
                    top: '5%',
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',

                    },
                    icon: 'circle',
                    itemGap: 35
                },
                "grid": {
                    "top": "15%",
                    "right": "10%",
                    "bottom": "40",
                    "left": "10%",
                },
                xAxis: [{
                    type: 'category',
                    data: data.xdata,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                        formatter: function (value) {
                            if (value.length > 6) {
                                return value.substring(0, 6) + '...';  // 长文本超出部分隐藏
                            } else {
                                return value;
                            }
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '销售金额',
                    type: 'scatter',
                    smooth: true,
                    data: data.ydata,
                    itemStyle: {
                        normal: {
                            color: '#90EE90',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                },
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

        // 使用刚指定的配置项和数据显示图表。

    }

    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        $.get(prefix + '/monthAmount', function (result) {
            var myChart = echarts.init(document.getElementById('echart5'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },
                "grid": {
                    "top": "20%",
                    "right": "50",
                    "bottom": "20",
                    "left": "80",
                },
                legend: {
                    data: ['销售金额'],
                    right: 'center', width: '100%',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                "xAxis": [
                    {
                        "type": "category",
                        data: result.xdata,
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                        },
                    },
                ],
                yAxis: [
                    {
                        "type": "value",
                        "name": "销售金额",
                        "show": true,
                        axisTick: {show: false},
                        splitLine: {
                            show: false,

                        },
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {
                            min: 0,
                            max: 10,
                            lineStyle: {color: '#fbc30d'}
                        },//左线色

                    },
                    {
                        "type": "value",
                        "name": "销售金额",
                        "show": false,
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            // formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle: {color: '#fbc30d'}},//右线色
                        splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [
                    {
                        "name": "销售金额",
                        "type": "line",
                        "yAxisIndex": 0,
                        "data": result.ydata,
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#fbc30d",

                            }
                        },
                        "smooth": true
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_4() {

        // 基于准备好的dom，初始化echarts实例
        $.get(prefix + '/monthCnt', function (result) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart4'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },
                "grid": {
                    "top": "15%",
                    "right": "10%",
                    "bottom": "60",
                    "left": "10%",
                },
                legend: {
                    data: ['货品数'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: [
                    {
                        "type": "category",

                        data: result.xdata,
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 5,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },

                    },
                ],
                yAxis: [
                    {
                        "type": "value",
                        splitLine: {show: false},
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色

                    },

                ],
                series: [

                    {
                        "name": "货品数",
                        "type": "bar",
                        "data": result.ydata,
                        "barWidth": "20%",

                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fccb05'
                                }, {
                                    offset: 1,
                                    color: '#f5804d'
                                }]),
                            }
                        },
                        "barGap": "0"
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例

        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                //shadowBlur: 40,
                //shadowColor: 'rgba(40, 40, 40, 1)',
            }
        };
        var placeHolderStyle = {
            normal: {
                color: 'rgba(255,255,255,.05)',
                label: {show: false,},
                labelLine: {show: false}
            },
            emphasis: {
                color: 'rgba(0,0,0,0)'
            }
        };
        $.get(prefix + '/goodsFeedbackCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echart6'));
            // 基于准备好的dom，初始化echarts实例
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ",
                },
                legend: {
                    orient: 'vertical',
                    top: '25%',
                    right: 0,
                    data: [],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: '12',
                    }
                },
                series: [
                    {
                        name: '货品数',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        // radius: ['40%', '70%'],
                        roseType: 'area',
                        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828', '#e58c00', '#eb295b'],
                        // label: {show: false},
                        // labelLine: {show: false},
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            };
            for (let i = 0; i < result.xdata.length; i++) {
                var mapData = {
                    name: '',
                    value: 0
                }
                option.legend.data.push(result.xdata[i])
                mapData.name = result.xdata[i]
                mapData.value = result.ydata[i]
                option.series[0].data.push(mapData)
            }


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_7() {
        // 基于准备好的dom，初始化echarts实例
        $.get(prefix + '/districtGoodsCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echart7'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },
                // "grid": {
                //     "top": "20%",
                //     "right": "50",
                //     "bottom": "20",
                //     "left": "30",
                // },
                legend: {
                    data: ['货品数量', '销售金额'],
                    right: 'center', width: '100%',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                "xAxis": [
                    {
                        "type": "category",
                        data: result.xdata,
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        // "name": "%",
                        axisTick: {show: false},
                        splitLine: {
                            show: false,

                        },
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {
                            min: 0,
                            max: 10,
                            lineStyle: {color: '#8bd46e'}
                        },//左线色

                    },
                    {
                        "type": "value",
                        // "name": "m/s",
                        "show": true,
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            // formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle: {color: '#fbc30d'}},//右线色
                        splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [

                    {
                        "name": "货品数量",
                        "type": "bar",
                        "data": result.ydata,
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#8bd46e'
                                }, {
                                    offset: 1,
                                    color: '#09bcb7'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "销售金额",
                        "type": "line",
                        "yAxisIndex": 1,

                        "data": result.zdata,
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#fbc30d",

                            }
                        },
                        "smooth": true
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });



    }


    function echarts_8() {
        $.get(prefix + '/districtGoodsStatus', function (result) {
            var myChart = echarts.init(document.getElementById('echart8'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },
                // "grid": {
                //     "top": "20%",
                //     "right": "50",
                //     "bottom": "20",
                //     "left": "30",
                // },
                legend: {
                    data: ['晚交货数','按时交货数'],
                    right: 'center', width: '100%',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                "xAxis": [
                    {
                        "type": "category",
                        data: result.xdata,
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        // "name": "%",
                        axisTick: {show: false},
                        splitLine: {
                            show: false,

                        },
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {
                            min: 0,
                            max: 10,
                            lineStyle: {color: '#8bd46e'}
                        },//左线色

                    },
                    {
                        "type": "value",
                        // "name": "m/s",
                        "show": true,
                        "axisLabel": {
                            "show": true,
                            fontSize: 14,
                            // formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle: {color: '#fbc30d'}},//右线色
                        splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [

                    {
                        "name": "晚交货数",
                        "type": "line",
                        "data": result.ydata,
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#7CFC00'
                                }, {
                                    offset: 1,
                                    color: '#32CD32'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "按时交货数",
                        "type": "scatter",
                        "yAxisIndex": 1,

                        "data": result.zdata,
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#00BFFF",

                            }
                        },
                        "smooth": true
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }


})



		
		
		


		









